<template>
  <div class="container">
    <div class="target">动态边框</div>
    <h3>clip-path 动态边框</h3>
  </div>
</template>

<script>
/*
// clip
// clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;



// clip-path 
// Keyword values 
clip-path: none;

// <clip-source> values 
clip-path: url(resources.svg#c1);

// <geometry-box> values
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

// <basic-shape> values 
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

// Box and shape values combined 
clip-path: padding-box circle(50px at 0 100px);

// Global values 
clip-path: inherit;
clip-path: initial;
clip-path: unset;
*/
</script>


<style scoped lang="scss">
.container > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  background: plum;
}
.target::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid OliveDrab;
  transition: all 0.5s;
  animation: clippath 3s infinite linear;
}
@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 95% 0);
  }
  25% {
    clip-path: inset(0 95% 0 0);
  }
  50% {
    clip-path: inset(95% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 95%);
  }
}
</style>
